import React from 'react'
import ReactDOM from 'react-dom'
//分号问题，只有在下一行开头是[(+-/才需要加分号
/**
 * 举例子
 * const a = [];
 * [1,2,3].forEach()
 */
//当我们需要在JSX控制的区域内，写JS表达式，则需要吧JS代码写到{}中
//渲染数字
let a = 10
//渲染字符串
let str = 'hello,react'
//渲染布尔值
let boo = true
//渲染标签属性
let title = '999'
//渲染标签
const h1 = <h1>剑来</h1>
//渲染数组
const arr = [
    <h2>这是h2</h2>,
    <h3>这是h3</h3>
]
const arrStr = ['李淳罡','徐龙象','洪洗象'];
//定义一个空数组，将来涌来存放名称标签[方案1]
const nameArr = [];
//注意，React中需要把key添加给被forEach或map或for循环直接控制的元素
arrStr.forEach(item =>{
    const temp = <h5 key={item}>{item}</h5>
    nameArr.push(temp)
})
//数组的map方法，map必须写return
/* const resutl = arrStr.map(item => {
    return item + '~~'
}) */
ReactDOM.render(<div>{a + 2}
<hr/>
{str}
<hr/>
{boo.toString()}
<hr/>
{boo?'条件为真':'条件为假'}
<p title={title}>这是p标签</p>
<hr/>
{h1}
<hr/>
{arr}
<hr/>
{nameArr}
<hr/>
{arrStr.map(item =>{
    return <h3 key={item}>{item}</h3>
})}
<hr/>
{arrStr.map(item=><h5 key={item}>{item}</h5>)}
{/*在JSX控制区域内，写JS表达式需要写在{}内,用className代替class，htmlFor代替for*/}
<hr/>
<p className="myele">AAA</p>
<label htmlFor="oo">222</label>
</div>,document.getElementById('app'))